<template>
  <view class="container">
    <view class="user-header">
      <image class="avatar" :src="userInfo.avatarUrl || 'http://114.55.56.174:19000/shzy/avatar.png'" mode="aspectFill" @tap="goToUserProfile"></image>
      <view class="user-info">
        <text class="nickname">{{userInfo.nickname || userInfo.username || '游客'}}</text>
        <text class="userid">ID: {{userInfo.userId || '未登录'}}</text><br>
        <text>个性签名：</text>
        <text class="signature" v-if="userInfo.signature">{{ userInfo.signature}}</text>
      </view>
      <view class="login-btn" v-if="isGuest" @tap="goToLogin" hover-class="login-btn-hover">
        <text>登录/注册</text>
      </view>
      <view class="settings-btn" v-else @tap="goToSettings">
        <text class="iconfont icon-settings"></text>
      </view>
    </view>
    
    <view class="stats-bar">
      <view class="stat-item" @tap="handleStatClick('likes')">
        <text class="num">{{isGuest ? 0 : userInfo.likes || 0}}</text>
        <text class="label">获赞</text>
      </view>
      <view class="stat-item" @tap="handleStatClick('following')">
        <text class="num">{{isGuest ? 0 : userInfo.following || 0}}</text>
        <text class="label">关注</text>
      </view>
      <view class="stat-item" @tap="handleStatClick('followers')">
        <text class="num">{{isGuest ? 0 : userInfo.followers || 0}}</text>
        <text class="label">粉丝</text>
      </view>
    </view>

    <view class="menu-list">
      <view class="menu-item" @click="goToAIChat">
        <text class="icon iconfont icon-ai">🤖</text>
        <text class="label">智能客服</text>
        <text class="arrow iconfont icon-right">></text>
      </view>
      
      <view class="menu-item" @click="goToOrders">
        <text class="icon iconfont icon-order">🛒</text>
        <text class="label">我的订单</text>
        <text class="arrow iconfont icon-right">></text>
      </view>
      
      <view class="menu-item" @click="goToCollection">
        <text class="icon iconfont icon-collection">⭐</text>
        <text class="label">我的收藏</text>
        <text class="arrow iconfont icon-right">></text>
      </view>
      
      <view class="menu-item" @click="goToWallet">
        <text class="icon iconfont icon-wallet">💰</text>
        <text class="label">我的钱包</text>
        <text class="arrow iconfont icon-right">></text>
      </view>
      
      <view class="menu-item" @click="goToInvite">
        <text class="icon iconfont icon-invite">🎁</text>
        <text class="label">邀请好友</text>
        <text class="arrow iconfont icon-right">></text>
      </view>
    </view>

    <view class="menu-list">
      <view class="menu-item" @tap="goToPage('settings')">
        <text class="icon iconfont icon-settings"></text>
        <text class="label">设置</text>
        <text class="arrow iconfont icon-right"></text>
      </view>
      <view class="menu-item" @tap="goToPage('feedback')">
        <text class="icon iconfont icon-feedback"></text>
        <text class="label">意见反馈</text>
        <text class="arrow iconfont icon-right"></text>
      </view>
      <view class="menu-item" @tap="goToPage('about')">
        <text class="icon iconfont icon-about"></text>
        <text class="label">关于我们</text>
        <text class="arrow iconfont icon-right"></text>
      </view>
    </view>

    <view v-if="!isGuest" class="logout-btn" @tap="handleLogout">退出登录</view>
  </view>
</template>

<script>
import { checkNeedLogin, isLoggedIn, logout, getUserInfo } from '@/utils/auth'

export default {
  data() {
    return {
      isGuest: true,
      userInfo: {
        userId: '',
        username: '',
        nickname: '',
        avatarUrl: '',
        signature: '',
        phone: '',
        email: '',
        gender: null,
        wxOpenid: '',
        likes: 0,
        following: 0,
        followers: 0
      }
    }
  },
  onShow() {
    // 每次进入页面检查登录状态
    this.checkLoginStatus()
  },
  onLoad() {
    console.log('用户页面加载')
    // 首次加载页面检查登录状态
    this.checkLoginStatus()
  },
  methods: {
    checkLoginStatus() {
      this.isGuest = !isLoggedIn()
      
      if (!this.isGuest) {
        // 获取用户信息
        const userInfo = getUserInfo()
        if (userInfo) {
          // 合并用户信息，保留统计数据的默认值
          this.userInfo = {
            ...this.userInfo,
            ...userInfo,
            // 如果后端没有提供这些统计数据，保持默认值
            likes: userInfo.likes || this.userInfo.likes,
            following: userInfo.following || this.userInfo.following,
            followers: userInfo.followers || this.userInfo.followers
          }
        }
      }
    },
    goToLogin() {
      console.log('点击登录按钮')
      
      // 使用全局导航方法
      this.$navigateTo('/pages/login/index')
    },
    goToSettings() {
      this.$navigateTo('/pages/user/settings')
    },
    handleStatClick(type) {
      if (this.isGuest) {
        checkNeedLogin()
        return
      }
      
      // 跳转到对应的统计页面
      this.$navigateTo(`/pages/user/${type}`)
    },
    goToPage(page) {
      // 需要登录的页面
      if (['orders', 'favorites'].includes(page)) {
        if (this.isGuest && checkNeedLogin()) {
          return
        }
      }
      
      this.$navigateTo(`/pages/user/${page}`)
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            logout()
          }
        }
      })
    },
    goToUserProfile() {
      uni.navigateTo({
        url: '/pages/user/settings'
      })
    },
    goToAIChat() {
      if (this.isGuest) {
        this.checkNeedLogin();
        return;
      }
      this.$navigateTo('/pages/message/ai-chat');
    },
    goToOrders() {
      if (this.isGuest && checkNeedLogin()) {
        return;
      }
      uni.navigateTo({
        url: '/pages/user/orders/index'
      });
    },
    goToCollection() {
      this.goToPage('favorites');
    },
    goToWallet() {
      this.goToPage('wallet');
    },
    goToInvite() {
      this.goToPage('invite');
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f6f6f6;
}

.user-header {
  position: relative;
  background: #fff;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;

  .avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    margin-right: 30rpx;
  }

  .user-info {
    flex: 1;
    
    .nickname {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
      display: block;
    }

    .userid {
      font-size: 28rpx;
      color: #999;
    }

    .signature {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .login-btn {
    background: #4080ff;
    color: #fff;
    font-size: 28rpx;
    padding: 15rpx 30rpx;
    border-radius: 30rpx;
    
    &-hover {
      background: #3070e0;
    }
  }
  
  .settings-btn {
    font-size: 40rpx;
    color: #999;
  }
}

.stats-bar {
  background: #fff;
  display: flex;
  padding: 30rpx 0;
  margin-bottom: 20rpx;

  .stat-item {
    flex: 1;
    text-align: center;
    border-right: 1px solid #eee;

    &:last-child {
      border-right: none;
    }

    .num {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      display: block;
      margin-bottom: 6rpx;
    }

    .label {
      font-size: 28rpx;
      color: #999;
    }
  }
}

.menu-list {
  background: #fff;
  margin-bottom: 20rpx;
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f6f6f6;
    
    &:last-child {
      border-bottom: none;
    }
    
    .icon {
      font-size: 40rpx;
      color: #4080ff;
      margin-right: 20rpx;
    }
    
    .label {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
    
    .arrow {
      font-size: 28rpx;
      color: #ccc;
    }
  }
}

.logout-btn {
  width: 690rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #fff;
  color: #ff4d4f;
  font-size: 32rpx;
  border-radius: 8rpx;
  text-align: center;
  margin: 40rpx auto;
}
</style> 